﻿@import "../../styles/mixins/btn";
@import "../../styles/mixins/utils";
@import "../../styles/mixins/vars";

.checkbox {
    .checkbox-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: $form-item-height;
        &.checked {
            .checkbox-icon {
                background-color: #00bca4;
                &:after {
                    border-color: #fff;
                    transform: translate(-50%, -50%) rotate(45deg) scale(1);
                }
            }
        }
    }
    .checkbox-icon {
        position: relative;
        display: inline-block;
        @include width-height(22);
        background-color: #FEFEFF;
        border: solid 1px #dfe8f1;
        border-radius: rem(4);
        &:after {
            transition: transform 150ms ease-in-out;
            $border: solid 4px transparent;
            position: absolute;
            top: 50%;
            left: 50%;
            content: ' ';
            display: inline-block;
            width: rem(8);
            height: rem(14);
            border-bottom: $border;
            border-right: $border;
            transform: translate(-50%, -50%) scale(0.2);
        }
    }
    .checkbox-label {
        margin-left: $d1;
    }
}

.checkbox-group {
    &.inline {
        display: flex;
        flex-wrap: wrap;
        justify-items: center;
        .checkbox {
            margin-right: $d4;
        }
    }
}

@each $color,
$value in $themes-colors {
    .checkbox-#{$color} {
        .checkbox-button.checked, &.checked {
            .checkbox-icon {
                background-color: $value;
                border-color: $value
            }
        }
    }
}